<template>
	<div>
		<address-head></address-head>
		<div class="wrap01">
		<div class="moren">
			<input type="text" name="" id="name" value="李四" />
			<input type="text" name="" id="number" value="手机号134654645146" />
			<br />	
			<input type="text" name="" id="sheng" value="河南省" />
			<input type="text" name="" id="email" value="邮编450000" />
		</div>
		<div class="bianji-del">
			<input type="radio" name="" id="ress" value="" /><span class="mrdz">默认地址</span>
			<img class="arc" src="../../assets/img/gerenzhongxin/gongzhonghao/radio.png"/>
			<img class="bi" src="../../assets/img/gerenzhongxin/gongzhonghao/bi.png"/>
			<p class="bj">编辑</p>
			<img class="chu" src="../../assets/img/gerenzhongxin/gongzhonghao/del.png"/>
			<p class="schu">删除</p>
		</div>
		</div>
	</div>
</template>

<script>
	import  addressHead from '@/components/geren/addressHead'
	export default {
		components: {
			addressHead
		},
		methods:{
			address:function(){
				var flag = true;
				$(".arc").click(function(){
					$(this).css("display","none");
					$("#ress").css("display","block");
				});
				$("#ress").click(function(){
					$(this).css("display","none");
					$(".arc").css("display","block");
				});
				$(".schu").click(function(){
					$(".wrap01").css("display","none");
				});
			}
		},
		mounted: function() {
			this.address();
		}
			
	}
</script>

<style>
	.moren{
		position: relative;
		width: 100%;
		height: 16rem;
		background: white;
		border-bottom: 0.1rem solid gainsboro;
	}
	#name{
		position: absolute;
		font-size: 2.7rem;
		color: black;
		left: 2rem;
		top: 2rem;
	}
	#number{
		position: absolute;
		font-size: 2.7rem;
		color: black;
		left: 16rem;
		top: 2.3rem;
	}
	#sheng{
		position: absolute;
		left: 2rem;
		top: 8.1rem;
		font-size: 2.4rem;
		color: darkgray;
	}
	#email{
		position: absolute;
		left: 2rem;
		top: 12rem;
		font-size: 2.4rem;
		color: darkgray;
	}
	.bianji-del{
		position: relative;
		width: 100%;
		height: 8rem;
		background: white;
		font-size: 2.4rem;
	}
	.mrdz{
		position: absolute;
		left: 6.6rem;
		top: 2.7rem;
	}
	#ress{
		position: absolute;
		width: 3rem;
		height: 3rem;
		left: 2rem;
		top: 2.5rem;
	}
	.arc{
		position: absolute;
		width: 3rem;
		height: 3rem;
		left: 2rem;
		top: 2.5rem;
		/*display: none;*/
	}
	.bi{
		position: absolute;
		width: 3rem;
		height: 3rem;
		left: 47.3rem;
		top: 2.5rem;
	}
	.bj{
		position: absolute;
		left: 52rem;
		top: 2.5rem;
	}
	.chu{
		position: absolute;
		width: 3rem;
		height: 3rem;
		left: 59.3rem;
		top: 2.5rem;
	}
	.schu{
		position: absolute;
		left: 64rem;
		top: 2.5rem;
	}
	
</style>